<template>
  <div class="access-list-wrap">
    <PageTop firstMenu="配料管理" secondMenu="配料列表" title="配料列表" @add-thing="$to('accessListCreate')"></PageTop>
    <div class="search-container">
      <el-input size="small" class="search" clearable v-model="keyword" placeholder="输入配料编号/配料关键字搜索"></el-input>
      <el-button plain size="small" type="primary" @click="getData">查询</el-button>
    </div>
    <tableList :tableData="listData" @getData="getData"></tableList>

    <div class="page-wrap">
      <el-pagination 
      class="page-count" 
      @current-change="getData" 
      background layout="total, prev, pager, next" 
      :total="totalCount" 
      :current-page.sync='page' 
      :page-size="15"></el-pagination>
    </div>

  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Prop, Component, Emit } from 'vue-property-decorator';
import PageTop from '@/components/pageTop.vue';
import tableList from '@/tables/access/accessListTable.vue';
import AjaxResquest from '@/api/apiRequest';
@Component({
  components: {
    PageTop,
    tableList
  }
})
export default class AccessList extends Vue {
  categoryRes!: AjaxResquest;
  listData: any[] = [];
  page: number = 1;
  pageSize: number = 15;
  totalCount: number = 0;
  keyword: string = '';
  mounted() {
    this.categoryRes = new AjaxResquest('/materials/getMaterialsList');
    this.getData();
  }

  getData() {
    let data = {
      page: this.page,
      pageSize: this.pageSize,
      keyWord: this.keyword
    };
    this.categoryRes.getFunction(data).then((res:any) => {
      if (res.data.code === 1) {
        this.listData = res.data.data.types;
        this.totalCount = res.data.data.allCount;
      }
    });
  }
}
</script>
<style lang="less">
.access-list-wrap {
  height: 100%;
  padding: 15px;
  box-sizing: border-box;
  .page-count-wrap {
    position: absolute;
    bottom: 25px;
    right: 25px;
  }
  .search-container {
    // display: flex;
    text-align: left;
    height: 32px;
    margin: 0px 10px 15px 0;
    .search {
      width: 250px;
      margin-right: 10px;
    }
  }
}
</style>
